// import logo from './logo.svg';
import { useState } from 'react';
import './App.css';
import ListItems from './components/ListItems';
import TodoList from './components/TodoList';


function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <>
      <button onClick={handleClick}>
        Click me
      </button>
      <p>You clicked {count} times</p>
    </>
  );
}

function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>Hello there.<br />How do you do?</p>

      {MyButton()}
      <MyButton />
    </>
  );
}

function App() {
  const person = { name: 'Lin Lanying', imageId: '1bX5QH6' }
  return (
    <div className="App">
      <header className="App-header">
      {/* <img src={logo} className="App-logo" alt="logo" /> */}
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
      </header>
      
      <main className='App-main'>
        {AboutPage()}
        <p>
          This is a simple React application.
        </p>
        <p>
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>

        <ListItems person={person} />

        <MyButton />

        <TodoList />
      </main>
    </div>
  );
}

export default App;
